import { PureComponent } from 'react';
import {
  Row,
  Col,
  Form,
  Input,
	Button,
	Modal,
	Select,
} from 'antd';
const FormItem = Form.Item;
const { Option } = Select;

//查看表单
@Form.create()
class ViewForm extends PureComponent {
    static defaultProps = {
        handleViewModalVisible: () => {},
    values: {},
};

constructor(props) {
    super(props);

    this.state = {
        formVals: {
            recordid: props.values.recordid,
            id: props.values.id,
            parentid:props.values.parentid,
            levelcode: props.values.levelcode,
            text: props.values.text,
            icon: props.values.icon,
            href: props.values.href,
            component: props.values.component,
            i18n_name: props.values.i18n_name,
            redirect: props.values.redirect,
            enable: props.values.enable,
        },
    };

}



renderContent = (formVals) => {
    const { form,values:{type} } = this.props;

    return (
<Form  layout="vertical" hideRequiredMark>

{type == 1?(
	<div>
			<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
	
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="菜单名称">
		            {form.getFieldDecorator('text', {
		            initialValue: formVals.text,
		            })(<Input readOnly placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	
	
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="链接">
		            {form.getFieldDecorator('href', {
		            initialValue: formVals.href,
		            })(<Input readOnly placeholder="请输入" />)}
		        </FormItem>
	        </Col>
			
	
	
	    </Row>
	    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="国际化菜单名">
		            {form.getFieldDecorator('i18n_name', {
		            initialValue: formVals.i18n_name,
		            })(<Input readOnly placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	       	<Col md={12} sm={24}>
		        <FormItem label="是否可用">
		            {form.getFieldDecorator('enable',{
		            	initialValue: formVals.enable,
		            })(
		                <Select placeholder="请选择" style={{ width: '100%' }}>
		                    <Option value="1">是</Option>
		                    <Option value="0">否</Option>
		                </Select>
		            )}
		        </FormItem>
	        </Col>
	
	    </Row>
	   	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
	        <Col  md={12} sm={24}>
		        <FormItem  label="路由组件">
		            {form.getFieldDecorator('component', {
		            initialValue: formVals.component,
		            })(<Input readOnly placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	        <Col  md={12} sm={24}>
		        <FormItem  label="路由重定向">
		            {form.getFieldDecorator('redirect', {
		            initialValue: formVals.redirect,
		            })(<Input readOnly placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	
	    </Row>
	</div>
):(
	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
	
	
	        <Col  md={24} sm={48}>
		        <FormItem  label="按钮名称">
		            {form.getFieldDecorator('text', {
		            initialValue: formVals.text,
		            })(<Input readOnly placeholder="请输入" />)}
		        </FormItem>
	        </Col>
	
	
	</Row>
)}



</Form>
);

};



render() {
    const { viewModalVisible, handleViewModalVisible, values } = this.props;
    this.state = {
        formVals: {
            recordid: values.recordid,
            id: values.id,
            parentid: values.parentid,
            levelcode: values.levelcode,
            text: values.text,
            icon: values.icon,
            href: values.href,
            component: values.component,
            i18n_name: values.i18n_name,
            redirect: values.redirect,
            enable: values.enable,  
        },
    };

    return (
        <Modal
    width={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="查看"
    visible={viewModalVisible}
    footer={<Button key="back" onClick={ () => handleViewModalVisible(false, values) }>取消</Button>}
    onCancel={() => handleViewModalVisible(false, values)}
>

    {this.renderContent(this.state.formVals)}
</Modal>
);
}

}

export default ViewForm;
